.popup {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .container {
    width: 84vw;
    max-height: 60vh;
    border-radius: 12px;
    overflow: hidden;

    display: grid;
    grid-template:
      'title' min-content
      'text' min-content
      'bonus-list' 1fr
      'check-btn' min-content;
    place-items: center;
    padding: 24px 12px 35px;
    row-gap: 8px;

    position: relative;

    .bg {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
    }

    .title {
      font-size: 24px;
      font-weight: bold;
      color: #333333;
    }

    .text {
      margin-top: 4px;
      margin-bottom: 4px;
      font-size: 14px;
      color: #333333;
    }

    .bonus-list {
      width: 100%;
      height: 100%;
      overflow: scroll;
      display: grid;
      grid-template-rows: repeat(auto-fill, 21.3333vw);
      row-gap: 8px;
      .bonus-item {
        width: 100%;
        height: 80px;
        background: #ffffff;
        border-radius: 4px;

        display: grid;
        grid-template:
          'icon name right' 1fr
          / 48px 1fr 64px;
        place-items: center;
        gap: 4px;
        padding: 16px 12px;

        .icon {
          grid-area: icon;
          width: 48px;
          height: 48px;
        }

        .name {
          grid-area: name;
          justify-self: start;
          font-size: 14px;
          color: #333333;
        }

        .right {
          grid-area: right;

          font-size: 20px;
          color: #f04465;
        }
      }
    }

    .check-btn {
      margin-top: 35px;

      width: 222px;
      height: 46px;
      background: #f04465;
      border-radius: 56px;

      display: flex;
      align-items: center;
      justify-content: center;

      font-size: 16px;
      color: #ffffff;
    }
  }

  .close-btn {
    margin-top: 45px;
    place-self: center;
    width: 32px;
    height: 32px;
    opacity: 0.8;
  }
}
